
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用防抖实现性能优化</title>
</head>
<style>
    .box{
        width: 500px;
        height: 500px;
        line-height: 500px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        font-size: 100px;
    }
</style>
<body>
   
    <div class="box"></div>
    <script>

        // 单位时间内，频繁触发事件;    搜索框  搜索  鼠标滚动事件  拖拽事件
        //需求： 鼠标在盒子上移动，里面的数字就会变化 + 1

        // 节流：单位时间内，频繁触发事件，只执行一次
        
        const box = document.querySelector(".box")

        let i = 1;
        function mouseMove() {
            box.innerHTML = i++
        }

        
        // 手写节流函数
        // 节流的核心就是利用定时器(setTimeout) 来实现
        // 1.声明一个定时器变量
        // 2.当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器
        // 3.如果没有定时器则开启定时器，记得存到变量里面
        // 3.1定时器里面调用执行的函数
        // 3.2定时器里面要把定时器清空
        
        function throttle(fn, t) {
            let timer = null
            return function () {
                if (!timer) {
                    
                    timer = setTimeout(function () {
                        fn()
                        // 清空定时器
                        timer = null
                    }, t)
                }
            }
        }
                
        
        // box.addEventListener('mousemove', mouseMove)
        box.addEventListener('mousemove', throttle(mouseMove, 1000))
        
        


    </script>



</body>
</html>